<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="cheng5.du">
    
    <title>
        
            前端基础知识体系-JS-WEB-API(Ajax) |
        
        cheng5.du
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/avatar.jpeg">
    
<link rel="stylesheet" href="/css/font-awesome.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"zh-CN"};
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpeg","favicon":"/images/avatar.jpeg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"人生海海，来日方长。"},"scroll":{"progress_bar":{"enable":false},"percent":{"enable":false}}},"local_search":{"enable":false,"preload":false},"code_copy":{"enable":false,"style":"default"},"pjax":{"enable":false},"lazyload":{"enable":false},"version":"3.4.5"};
    KEEP.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 个月前","year":"%s 年前"};
  </script>
<meta name="generator" content="Hexo 6.1.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                cheng5.du
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                分类
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                标签
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/netease"
                            >
                                网抑云
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                关于我
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">分类</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">标签</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/netease">网抑云</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">关于我</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">前端基础知识体系-JS-WEB-API(Ajax)</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.jpeg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">cheng5.du</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;
        <span class="pc">2021-05-11 15:34:57</span>
        <span class="mobile">2021-05-11 15:34</span>
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">知识体系</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/%E6%80%BB%E7%BB%93/">总结</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/JS/">JS</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/JS-WEB-API/">JS-WEB-API</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h2 id="Ajax"><a href="#Ajax" class="headerlink" title="Ajax"></a>Ajax</h2><blockquote>
<p>Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。</p>
</blockquote>
<h3 id="原生实现"><a href="#原生实现" class="headerlink" title="原生实现"></a>原生实现</h3><ol>
<li><p>get</p>
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span><br><span class="line">xhr.<span class="title function_">open</span>(<span class="string">&#x27;get&#x27;</span>, <span class="string">&#x27;/get&#x27;</span>, <span class="literal">true</span>)</span><br><span class="line">xhr.<span class="property">onreadystatechange</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">if</span>(xhr.<span class="property">readyState</span> === <span class="number">4</span> &amp;&amp; xhr.<span class="property">status</span> === <span class="number">200</span>) <span class="comment">// TODO</span></span><br><span class="line">&#125;</span><br><span class="line">xhr.<span class="title function_">send</span>()</span><br></pre></td></tr></table></figure>
</li>
<li><p>post</p>
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// post传递的数据</span></span><br><span class="line"><span class="keyword">const</span> data = &#123; <span class="attr">name</span>: <span class="string">&#x27;cheng5&#x27;</span> &#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span><br><span class="line">xhr.<span class="title function_">open</span>(<span class="string">&#x27;post&#x27;</span>, <span class="string">&#x27;/post&#x27;</span>, <span class="literal">true</span>)</span><br><span class="line"><span class="comment">// 设置请求头</span></span><br><span class="line"><span class="comment">// xhr.setRequestHeader = &#123; &#x27;Content-Type&#x27;: &#x27;application/x-www-form-urlencoded&#x27; &#125;</span></span><br><span class="line">xhr.<span class="property">setRequestHeader</span> = &#123; <span class="string">&#x27;Content-Type&#x27;</span>: <span class="string">&#x27;application/json&#x27;</span> &#125;</span><br><span class="line">xhr.<span class="property">onreadystatechange</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">if</span>(xhr.<span class="property">readyState</span> === <span class="number">4</span> &amp;&amp; xhr.<span class="property">status</span> === <span class="number">200</span>) <span class="comment">// TODO</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(xhr.<span class="property">responseText</span>) <span class="comment">// &#123; &#x27;name&#x27;: &#x27;cheng5&#x27; &#125;</span></span><br><span class="line">&#125;</span><br><span class="line">xhr.<span class="title function_">send</span>(data)</span><br></pre></td></tr></table></figure></li>
</ol>
<h4 id="方法参数解析"><a href="#方法参数解析" class="headerlink" title="方法参数解析"></a>方法参数解析</h4><h5 id="open"><a href="#open" class="headerlink" title="open"></a>open</h5><p>open(method: string, url: string, async: boolean)</p>
<p>async &#x3D; true &#x3D;&gt; 异步；async &#x3D; false &#x3D;&gt; 同步</p>
<h5 id="setRequestHeader"><a href="#setRequestHeader" class="headerlink" title="setRequestHeader"></a>setRequestHeader</h5><p>如Accept-Charset、Accept-Encoding、Connection、Host等等一些类都是浏览器控制，我们不能手动设置。</p>
<p>一般情况下，我们能设置的是Content-Type：</p>
<ol>
<li>‘application&#x2F;x-www-form-urlencoded’</li>
<li>‘application&#x2F;json’</li>
<li>‘multipart&#x2F;form-data’</li>
</ol>
<h5 id="onreadystatechage"><a href="#onreadystatechage" class="headerlink" title="onreadystatechage"></a>onreadystatechage</h5><p>存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。</p>
<h5 id="readyState"><a href="#readyState" class="headerlink" title="readyState"></a>readyState</h5><p>0：【未初始化】请求未初始化（代理被创建，但尚未调用send()方法）</p>
<p>1：【载入】服务器连接已建立（send()方法已调用，正在发送请求）</p>
<p>2：【载入完成】请求已接收（send()方法已执行完毕，已接收全部响应内容）</p>
<p>3：【解析】请求处理中（解析响应内容）</p>
<p>4：【解析完成】请求已完成，且响应已就绪（响应内容解析完成，可在客户端调用）</p>
<h5 id="status"><a href="#status" class="headerlink" title="status"></a>status</h5><p>1**：请求收到，继续处理</p>
<p>2**：操作成功，分析</p>
<p>3**：完成此请求必须进一步处理</p>
<p>4**：请求包含一个语法错误或不能完成</p>
<p>5**：服务器执行请求失败</p>
<h5 id="send"><a href="#send" class="headerlink" title="send"></a>send</h5><p>send(data)</p>
<p>将请求发送到服务器。且参数data的格式，需要在setRequestHeader中设置。</p>
<h3 id="同源政策"><a href="#同源政策" class="headerlink" title="同源政策"></a>同源政策</h3><p>同源策略是一种安全协议，是客户端脚本中中重要的安全度量标准，指一段脚本只能读取同一来源的窗口和文档的属性。</p>
<p>同源：协议、域名、端口 三者必须一致。</p>
<h4 id="同源检测"><a href="#同源检测" class="headerlink" title="同源检测"></a>同源检测</h4><p>以<a class="link"   target="_blank" rel="noopener" href="http://a.com/test/index.html%E6%A3%80%E6%B5%8B%EF%BC%9A" >http://a.com/test/index.html检测：<i class="fas fa-external-link-alt"></i></a></p>
<p><a class="link"   target="_blank" rel="noopener" href="http://a.com/dir/page.html" >http://a.com/dir/page.html<i class="fas fa-external-link-alt"></i></a> &#x2F;&#x2F; 成功</p>
<p><a class="link"   target="_blank" rel="noopener" href="http://child.a.com/test/index.html" >http://child.a.com/test/index.html<i class="fas fa-external-link-alt"></i></a> &#x2F;&#x2F; 失败，域名不同</p>
<p><a class="link"   target="_blank" rel="noopener" href="https://a.com/test/index.html" >https://a.com/test/index.html<i class="fas fa-external-link-alt"></i></a> &#x2F;&#x2F; 失败，协议不同</p>
<p><a class="link"   target="_blank" rel="noopener" href="http://a.com:9090/test/index.html" >http://a.com:9090/test/index.html<i class="fas fa-external-link-alt"></i></a> &#x2F;&#x2F; 失败，端口不同</p>
<p><a class="link"   target="_blank" rel="noopener" href="http://domain.com/a.js" >http://domain.com/a.js<i class="fas fa-external-link-alt"></i></a> &#x2F;&#x2F; 失败，虽然ip相同，但域名不同</p>
<h4 id="img-x2F-css-x2F-js可无视同源政策"><a href="#img-x2F-css-x2F-js可无视同源政策" class="headerlink" title="img&#x2F;css&#x2F;js可无视同源政策"></a>img&#x2F;css&#x2F;js可无视同源政策</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">跨域的图片地址</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">跨域的css地址</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">跨域的js地址</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="跨域"><a href="#跨域" class="headerlink" title="跨域"></a>跨域</h3><p>当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。</p>
<h4 id="跨域解决方案"><a href="#跨域解决方案" class="headerlink" title="跨域解决方案"></a>跨域解决方案</h4><ol>
<li>通过jsonp跨域</li>
<li>document.domain + iframe跨域</li>
<li>location.hash + iframe</li>
<li>window.name + iframe跨域</li>
<li>postMessage跨域</li>
<li>跨域资源共享（CORS）</li>
<li>nginx代理跨域</li>
<li>nodejs中间件代理跨域</li>
<li>WebSocket协议跨域</li>
</ol>
<h5 id="jsonp"><a href="#jsonp" class="headerlink" title="jsonp"></a>jsonp</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> script = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;script&#x27;</span>)</span><br><span class="line">script.<span class="property">type</span> = <span class="string">&#x27;text/javascript&#x27;</span></span><br><span class="line"></span><br><span class="line">script.<span class="property">src</span> = <span class="string">&#x27;http://domain.com/login?user=cheng5&amp;callback=onBack&#x27;</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="property">head</span>.<span class="title function_">appendChild</span>(script)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 回调函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">onBack</span>(<span class="params">res</span>) &#123;</span><br><span class="line">  <span class="comment">// TODO</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="CORS"><a href="#CORS" class="headerlink" title="CORS"></a>CORS</h5><p>普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。</p>
<ol>
<li><p>前端设置</p>
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">xhr.<span class="property">withCredentials</span> = <span class="literal">true</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>后端设置（Node）</p>
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">res.<span class="title function_">writeHead</span>(<span class="number">200</span>, &#123;</span><br><span class="line">  <span class="string">&#x27;Access-Control-Allow-Credentials&#x27;</span>: <span class="string">&#x27;true&#x27;</span>,     <span class="comment">// 后端允许发送Cookie</span></span><br><span class="line">  <span class="string">&#x27;Access-Control-Allow-Origin&#x27;</span>: <span class="string">&#x27;http://www.domain1.com&#x27;</span>,    <span class="comment">// 允许访问的域（协议+域名+端口）</span></span><br><span class="line">  <span class="string">&#x27;Set-Cookie&#x27;</span>: <span class="string">&#x27;l=a123456;Path=/;Domain=www.domain2.com;HttpOnly&#x27;</span>   <span class="comment">// HttpOnly:脚本无法读取cookie</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
</ol>
<h5 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h5><p><a class="link"   target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000011145364" >前端常见跨域解决方案<i class="fas fa-external-link-alt"></i></a></p>
<h3 id="封装简易的Ajax"><a href="#封装简易的Ajax" class="headerlink" title="封装简易的Ajax"></a>封装简易的Ajax</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">myAjax</span>(<span class="params">method, url, isAsync, data = <span class="literal">null</span>, contentType = <span class="literal">null</span></span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span><br><span class="line">    xhr.<span class="title function_">open</span>(method, url, isAsync)</span><br><span class="line">    <span class="keyword">if</span> (contentType) xhr.<span class="title function_">setRequestHeader</span>(<span class="string">&#x27;Content-Type&#x27;</span>, contentType)</span><br><span class="line">    xhr.<span class="property">onreadystatechange</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (xhr.<span class="property">readyState</span> === <span class="number">4</span> &amp;&amp; xhr.<span class="property">status</span> === <span class="number">200</span>) &#123;</span><br><span class="line">        <span class="title function_">resolve</span>(xhr.<span class="property">responseText</span>)</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="title function_">reject</span>(<span class="string">&#x27;fail&#x27;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    xhr.<span class="title function_">send</span>(data)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">myAjax</span>(<span class="string">&#x27;post&#x27;</span>, <span class="string">&#x27;/api&#x27;</span>, <span class="literal">true</span>).<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// TODO</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

        </div>

        

        
            <ul class="post-tags-box">
                
                    <li class="tag-item">
                        <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">#知识体系</a>&nbsp;
                    </li>
                
                    <li class="tag-item">
                        <a href="/tags/%E6%80%BB%E7%BB%93/">#总结</a>&nbsp;
                    </li>
                
                    <li class="tag-item">
                        <a href="/tags/JS/">#JS</a>&nbsp;
                    </li>
                
                    <li class="tag-item">
                        <a href="/tags/JS-WEB-API/">#JS-WEB-API</a>&nbsp;
                    </li>
                
            </ul>
        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/2021/05/12/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS-WEB-API(%E5%AD%98%E5%82%A8)/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">前端基础知识体系-JS-WEB-API(存储)</span>
                                <span class="post-nav-item">上一篇</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2021/05/10/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS-WEB-API(%E4%BA%8B%E4%BB%B6)/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">前端基础知识体系-JS-WEB-API(事件)</span>
                                <span class="post-nav-item">下一篇</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2020</span>
              -
            
            2023&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">cheng5.du</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.5</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    

    <div class="image-viewer-container">
    <img src="">
</div>


    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>








<div class="post-scripts">
    
</div>



</body>
</html>
